<template>
  <div>
    <div id="box"></div>
    <vertical-menu></vertical-menu>
    <div class="tabbar">
      <div id="circle1"></div>
      <div id="circle2"></div>
      <div class="page-header">
        <div class="week">
          <i class="el-icon-arrow-left" @click="lastweek()"></i>
          <i class="el-icon-arrow-right" @click="nextweek()"></i>
          <div class="date">
            <div class="date1">
              {{date1.date}}
            </div>
            <div class="conection">
              <span>-</span>
            </div>
            <div class="date2">
              {{date2.date}}
            </div>
          </div>
        </div>
        <div style="float:right">
          <div class="filtrate">
            <i class="el-icon-department iconfont"></i>
            <el-select v-model="deSelect" placeholder="select department" @change="departmentChange">
              <el-option label="All Department" :value="0"></el-option>
              <el-option
                v-for="item in department"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="filtrate">
            <i class="el-icon-user iconfont"></i>
            <el-select v-model="staffSelect" placeholder="select staff" @change="selectChange">
              <el-option label="All Staff" :value="0"></el-option>
              <el-option
                v-for="item in staffData"
                :key="item.number"
                :label="item.name"
                :value="item.number">
              </el-option>
            </el-select>
          </div>
          <div class="filtrate">
            <i class="el-icon-manager iconfont"></i>
            <el-select v-model="managerSelect" placeholder="select manager" @change="selectChange">
              <el-option label="All Manager" :value="0"></el-option>
              <el-option
                v-for="item in managerData"
                :key="item.number"
                :label="item.name"
                :value="item.number">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <div id="base">
      <div class="roster-group">
        <el-card
          v-for="(item, index) in weekday"
          :key="index"
          shadow="never"
          :style="{'background-color': (item.type === '/' && item.weeks != 'Sun' && item.weeks != 'Sat'? '#EEEEEE' : 'rgba(150,169,97,0.15)')}"
          class="roster">
          <div slot="header">{{item.weeks}}</div>
          <div style="height:100%;">
            <el-scrollbar style="height:100%;">
            <div
              class="scheduled"
              v-for="(schedule,i) in item.arrangeList"
              :key="i">
              <div
                class="initials"
                :style="{'background-color': schedule.color+'80'}">
                <span>{{schedule.abbrev}}</span><br>
                <el-dropdown trigger="click" class="edit" v-if="schedule.uid != 0">
                  <i class="el-icon-setting iconfont"></i>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-file-editing iconfont" @click.native="handleEdit(schedule)">Edit</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-delete iconfont" @click.native="handleDelete(schedule.uid)">Delete</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <!-- <i class="el-icon-setting iconfont"></i> -->
              </div>
              <div
                class="staff-detail"
                :style="{'background-color': schedule.color+'30'}">
                <div class="name">
                  {{schedule.staffname}}
                </div>
                <div class="role">
                  {{schedule.role}}
                </div>
                <div class="time">
                  <div class="t">
                    {{schedule.startTime}}
                  </div>
                  <div class="c">
                    -
                  </div>
                  <div class="t">
                    {{schedule.finishTime}}
                  </div>
                </div>
                <div class="manager">
                  <i class="el-icon-manager iconfont"></i>
                  {{schedule.managername}}
                </div>
              </div>
            </div>
            <div class="add-shift" @click="handleAddShift(item.date)">
              <i class="el-icon-add-file iconfont"></i>
              Add Shift
            </div>
            </el-scrollbar>
            <div class="type" v-if="item.type != '/' || item.weeks == 'Sun' || item.weeks == 'Sat'">
              <span v-if="item.type != '/'">{{item.type}}</span>
              <span v-else>weekends</span>
            </div>
          </div>
        </el-card>
      </div>
      <!-- <div style="width: 1234px;margin-left: 15px;height: 620px;">
        <el-row>
          <el-col
            :span="3"
            v-for="(item, index) in weekday"
            :key="index"
            :style="{'background-color': (item.daytype === '' ? '#EEEEEE' : 'rgba(150,169,97,0.24)')}">
            <div style="width:100%;height: 50px;border: 2px solid rgba(150, 169, 97,0.5);text-align: center;">{{item.day}}</div>
          </el-col>
        </el-row>
      </div> -->
    </div>
    <add-shift v-show="shiftDialogVisible" :is-show="shiftDialogVisible" @handleClose="handleCloseShift" :day-time="nowTime"></add-shift>
    <edit-shift v-show="shiftDialogVisible2" :is-show="shiftDialogVisible2" @handleClose="handleCloseShift2" :day-time="nowTime" :info="info"></edit-shift>
  </div>
</template>

<script>
import VerticalMenu from '@/components/VerticalMenu'
import AddShift from '@/components/dialog/AddShift'
import EditShift from '@/components/dialog/EditShift'
export default {
  components: {
    VerticalMenu,
    AddShift,
    EditShift,
  },
  data(){
    return {
      shiftDialogVisible: false,
      shiftDialogVisible2: false,
      nowTime: '',
      info: {},
      date1: {
        date: '',
        time: '',
      },
      date2: {
        date: '',
        time: '',
      },
      week: ['Sun.','Mon.','Tues.','Wed.','Thur.','Fri.','Sat.'],
      // weekday: [{
      //   day: 'Sun.',
      //   daytype: 'Weekends',
      //   date: '2021-11-14',
      //   scheduling: [],
      // },{
      //   day: 'Mon.',
      //   daytype: '',
      //   date: '',
      //   scheduling: [{
      //     initials: 'H',
      //     id: '37',
      //     name: 'Hermit',
      //     departmentColor: '#FDE269',
      //     role: 'Manager Assistent',
      //     startTime: '9:00',
      //     finishTime: '17:00',
      //     managerName: 'Hermit',
      //   }, {
      //     initials: 'C',
      //     name: 'CD',
      //     departmentColor: '#96A961',
      //     role: 'Manager Assistent',
      //     startTime: '9:00',
      //     finishTime: '21:00',
      //     managerName: 'Jone',
      //   }, {
      //     initials: 'B',
      //     name: 'BAOBO',
      //     departmentColor: '#FDE269',
      //     role: 'Manager Assistent',
      //     startTime: '9:00',
      //     finishTime: '21:00',
      //     managerName: 'Hermit',
      //   }],
      // },{
      //   day: 'Tues.',
      //   daytype: 'Public Holiday',
      //   date: '',
      //   scheduling: [],
      // },{
      //   day: 'Wed.',
      //   daytype: '',
      //   date: '',
      //   scheduling: [{
      //     initials: 'HEM',
      //     name: 'Hermit',
      //     departmentColor: '#FDE269',
      //     role: 'Manager Assistent',
      //     startTime: '9:00',
      //     finishTime: '17:00',
      //     managerName: 'Hermit',
      //   }, {
      //     initials: 'C',
      //     name: 'CD',
      //     departmentColor: '#96A961',
      //     role: 'Manager Assistent',
      //     startTime: '9:00',
      //     finishTime: '21:00',
      //     managerName: 'Jone',
      //   }, {
      //     initials: 'B',
      //     name: 'BAOBO',
      //     departmentColor: '#FDE269',
      //     role: 'Manager Assistent',
      //     startTime: '9:00',
      //     finishTime: '21:00',
      //     managerName: 'Hermit',
      //   }],
      // },{
      //   day: 'Thur.',
      //   daytype: '',
      //   date: '',
      //   scheduling: [{
      //     initials: 'H',
      //     name: 'Hermit',
      //     departmentColor: '#FDE269',
      //     role: 'Manager Assistent',
      //     startTime: '9:00',
      //     finishTime: '17:00',
      //     managerName: 'Hermit',
      //   }, {
      //     initials: 'C',
      //     name: 'CD',
      //     departmentColor: '#96A961',
      //     role: 'Manager Assistent',
      //     startTime: '9:00',
      //     finishTime: '21:00',
      //     managerName: 'Jone',
      //   }, {
      //     initials: 'N',
      //     name: 'NHJIA',
      //     departmentColor: '#8BF0F7',
      //     role: 'Manager Assistent',
      //     startTime: '9:00',
      //     finishTime: '17:00',
      //     managerName: 'Jackson',
      //   }, {
      //     initials: 'B',
      //     name: 'BAOBO',
      //     departmentColor: '#FDE269',
      //     role: 'Manager Assistent',
      //     startTime: '9:00',
      //     finishTime: '21:00',
      //     managerName: 'Hermit',
      //   }],
      // },{
      //   day: 'Fri.',
      //   daytype: '',
      //   date: '',
      //   scheduling: [{
      //     initials: 'H',
      //     name: 'Hermit',
      //     departmentColor: '#FDE269',
      //     role: 'Manager Assistent',
      //     startTime: '9:00',
      //     finishTime: '17:00',
      //     managerName: 'Hermit',
      //   }, {
      //     initials: 'C',
      //     name: 'CD',
      //     departmentColor: '#96A961',
      //     role: 'Manager Assistent',
      //     startTime: '9:00',
      //     finishTime: '21:00',
      //     managerName: 'Jone',
      //   }, {
      //     initials: 'N',
      //     name: 'NHJIA',
      //     departmentColor: '#8BF0F7',
      //     role: 'Manager Assistent',
      //     startTime: '9:00',
      //     finishTime: '21:00',
      //     managerName: 'Jackson',
      //   }],
      // },{
      //   day: 'Sat.',
      //   daytype: 'Weekends',
      //   date: '',
      //   scheduling: [],
      // }],
      weekday: [],
      date: '',
      deSelect: 0,
      department: [],
      staffSelect: 0,
      staffData: [],
      managerSelect: 0,
      managerData: [],
      arrange1: [],
      arrange2: [],
    }
  },
  created() {
    this.getTime();
    this.weekday = JSON.parse(sessionStorage.getItem('weekday'));
    console.log(111);
    if(this.weekday === null){
      console.log(222);
      this.getRoster(this.date1.time);
    }
    // this.getRoster(this.date1.time);
  },
  mounted(){
    // this.getArrange();
    this.staffData = JSON.parse(sessionStorage.getItem('staffData'));
    this.managerData = JSON.parse(sessionStorage.getItem('managerData'));
    if(this.staffData === null || this.managerData === null){
      this.getAllStaff();
    }
    this.department = JSON.parse(sessionStorage.getItem('department'));
    console.log(this.department);
    if(this.department === null){
      this.getAllDepartment();
    }
  },
  methods: {
    getTime(){
      const _this = this;
      let nowData = new Date();
      //get today
      let currentDay = nowData.getDay();
      //get Sunday
      let sunDayTime = nowData.getTime() - currentDay * 24 * 60 * 60 * 1000;
      //get Saturday
      let satDayTime = nowData.getTime() + (6 - currentDay) * 24 * 60 * 60 * 1000;
      _this.date1.time = sunDayTime;
      _this.date1.date = _this.changeDay(sunDayTime);
      _this.date2.time = satDayTime;
      _this.date2.date  = _this.changeDay(satDayTime);
    },
    getRoster(date){
      const _this = this;
      var day = _this.getDate(date);
      _this.$api.arrange.getWeekArrange({
        number: _this.staffSelect,
        departmentid: _this.deSelect,
        managernumber: _this.managerSelect,
        date: day,
      }).then(res => {
        if(res.data.code === 2000){
          _this.weekday = res.data.data;
        } else {
          _this.$message.error(res.data.message);
        }
      }).catch(err => {
        console.log(err);
      })
    },
    lastweek(){
      const _this = this;
      //get Sunday
      let sunDayTime = _this.date1.time - 7 * 24 * 60 * 60 * 1000;
      //get Saturday
      let satDayTime = _this.date2.time - 7 * 24 * 60 * 60 * 1000;
      _this.date1.time = sunDayTime;
      _this.date1.date = _this.changeDay(sunDayTime);
      _this.date2.time = satDayTime;
      _this.date2.date  = _this.changeDay(satDayTime);
      _this.getRoster(this.date1.time);
    },
    nextweek(){
      const _this = this;
      //get Sunday
      let sunDayTime = _this.date1.time + 7 * 24 * 60 * 60 * 1000;
      //get Saturday
      let satDayTime = _this.date2.time + 7 * 24 * 60 * 60 * 1000;
      _this.date1.time = sunDayTime;
      _this.date1.date = _this.changeDay(sunDayTime);
      _this.date2.time = satDayTime;
      _this.date2.date  = _this.changeDay(satDayTime);
      _this.getRoster(this.date1.time);
    },
    changeDay(date){
      var m=new Array('Jan.','Feb.','Mar.','Apr.','May.','Jun.','Jul','Aug.','Sep.','Oct.','Nov.','Dec');
      var d=new Array("st","nd","rd","th");
      var mn = new Date(date).getMonth();
      var dn = new Date(date).getDate();
      var dns;
      if(((dn%10)<1) ||((dn%10)>3)){
        dns = d[3];
      }else {
        dns=d[(dn%10)-1];
        if((dn==11)||(dn==12)){
          dns=d[3];
        }
      }
      return dn + dns + ' '+ m[mn]
    },
    getDate(date){
      var date = new Date(date);
      var YY = date.getFullYear() + '-';
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
      return YY + MM + DD;
    },
    departmentChange() {
      const _this = this;
      _this.staffSelect = 0;
      _this.managerSelect = 0;
      if(_this.deSelect === 0){
        _this.department = JSON.parse(sessionStorage.getItem('department'));
        _this.staffData = JSON.parse(sessionStorage.getItem('staffData'));
        _this.managerData = JSON.parse(sessionStorage.getItem('managerData'));
        if(this.staffData === null){
          getAllStaff();
        }
        if(this.department === null){
          getAllDepartment();
        }
      } else {
        _this.getDepartStaff(_this.deSelect);
        _this.getDepartManager(_this.deSelect);
      }
      _this.getRoster(this.date1.time);
    },
    selectChange() {
      const _this = this;
      _this.getRoster(this.date1.time);
    },
    handleAddShift(val) {
      const _this = this;
      _this.nowTime = val;
      _this.shiftDialogVisible = true;
    },
    handleCloseShift() {
      const _this = this;
      this.getRoster(this.date1.time);
      _this.shiftDialogVisible = false;
    },
    handleEdit(val) {
      const _this = this;
      let arr = {
        uid: val.uid,
        department: val.departmentId,
        nickName: val.abbrev,
        staff: val.number,
        role: val.role,
        time: [val.startTime,val.finishTime],
        cycle: val.cycle,
      }
      _this.info = arr;
      _this.shiftDialogVisible2 = true;
    },
    handleDelete(val) {
      const _this = this;
      _this.$api.arrange.deleteArrange({
        uid: val
      }).then(res => {
        if(res.data.code === 2000){
          _this.getRoster(this.date1.time);
          _this.$message.success("delete success");
        }else{
          _this.$message.error(res.data.message);
        }
      }).catch(err => {
        console.log(err);
      })
    },
    handleCloseShift2() {
      const _this = this;
      this.getRoster(this.date1.time);
      _this.shiftDialogVisible2 = false;
    },
    getAllStaff(){
      const _this = this
      _this.$api.staff.getAllStaff().then(res => {
        if (res.data.code === 2000) {
          _this.staffData = res.data.data;
          // _this.sortPosition(_this.staffData)
          sessionStorage.setItem('staffData',JSON.stringify(_this.staffData));
          _this.managerData = _this.staffData.filter((item) => {
            return item.position != 'Staff'
          })
          sessionStorage.setItem('managerData',JSON.stringify(_this.managerData));
        } else {
          _this.$message.error(res.data.message);
        }
      }).catch(err => {
        console.log(err);
      })
    },
    getAllDepartment() {
      const _this = this
      _this.$api.department.getAllDepartment().then(res => {
        if (res.data.code === 2000) {
          _this.department = res.data.data;
          sessionStorage.setItem('department',JSON.stringify(_this.department));
        } else {
          _this.$message.error(res.data.message);
        }
      }).catch(err => {
        console.log(err);
      })
    },
    getDepartStaff(index){
      const _this = this;
      // var department_id = _this.deDetail[index].id;
      _this.$api.staff.getDepartStaff({
        department_id: index,
      }).then(res => {
        if(res.data.code === 2000){
          _this.staffData = res.data.data;
        }else{
          _this.$message.error(res.data.message);
        }
      }).catch(err => {
        console.log(err);
      })
    },
    getDepartManager(index){
      const _this = this;
      _this.$api.department.getManager({
        departmentid: index,
      }).then(res => {
        if(res.data.code === 2000){
          _this.managerData = res.data.data;
        } else {
          _this.$message.error(res.data.message);
        }
      }).catch(err => {
        console.log(err);
      })
    }
    // sortPosition(staffData){
    //   const _this = this
    //   for(var i=0;i<staffData.length-1;i++) {
    //     for(var j=i+1;j<staffData.length;j++) {
    //       if(staffData[i].position > staffData[j].position){
    //         var temp = staffData[i]
    //         staffData[i] = staffData[j]
    //         staffData[j] = temp
    //       } else if (staffData[i].position === staffData[j].position && staffData[i].name > staffData[j].name){
    //         var temp = staffData[i]
    //         staffData[i] = staffData[j]
    //         staffData[j] = temp
    //       }
    //     }
    //   }
    //   // console.log(staffData)
    // },
    // getArrange(){
    //   const _this = this;
    //   _this.$api.arrange.getAllArrange().then(res => {
    //     if(res.data.code = 2000){
    //       _this.arrange1 = res.data.data;
    //       console.log(_this.arrange1);
    //       console.log('------------');
    //       _this.getWeekArrange();
    //     }else {
    //       _this.$message.error(res.data.message);
    //     }
    //   }).catch(err => {
    //     console.log(err);
    //   })
    // },
    // getWeekArrange(){
    //   const _this = this;
    //   Object.keys(_this.arrange1).forEach((key) => {
    //     if ((typeof _this.arrange1[key]) === 'object') {
    //       _this.arrange1[key] = JSON.stringify(_this.arrange1[key]) // 这里必须使用内置JSON对象转换
    //     }
    //   })
    //   // _this.arrange1 = qs.stringify(_this.arrange1)
    //   // console.log(_this.arrange1)
    //   _this.$api.arrange.getWeekArrange({
    //     dateofweek: '2021-11-20',
    //     arrangeList: _this.arrange1,
    //   }).then(res => {
    //     if(res.data.code === 2000){
    //       _this.arrange2 = res.data.data;
    //       console.log(_this.arrange2)
    //     }else {
    //       _this.$message.error(res.data.message);
    //     }
    //   }).catch(err => {
    //     console.log(err);
    //   })
    // }
  },
}
</script>

<style lang="less" scoped>
  #box {
    height: 100%;
    width: 100%;
    position: fixed;
    background-color: #F2F2F2;
    z-index: -1;
  }

  #base {
    padding: 100px 0 0 250px;
    background-color: #F2F2F2;
  }

  .content {
    padding-bottom: 20px;
    width: 1269px;
    background-color: #F2F2F2;
    float: left;
  }

  #circle1 {
    border-width: 1px;
    position: fixed;
    left: 1318px;
    top: -39px;
    width: 150px;
    height: 150px;
    display: flex;
    border-radius:50%;
    background-color: rgba(253,167,105,0.24);
  }

  #circle2 {
    border-width: 1px;
    position: fixed;
    left: 1418px;
    top: 61px;
    width: 100px;
    height: 100px;
    display: flex;
    border-radius:50%;
    background-color: rgba(150,169,97,0.24);
  }

  .tabbar {
    margin: 0 0 0 250px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #F2F2F2;
    // z-index: 100;
    position: fixed;
  }

  .page-header {
    width: 1234px;
    height: 64px;
    background-color: rgba(242,235,211,0.3);
    border: 2px solid rgba(150, 169, 97,0.5);
    border-radius: 5px;
    margin: 0 20px 0 15px;
    line-height: 64px;
    .el-icon-user, .el-icon-department, .el-icon-manager {
      font-size: 20px;
      margin-right: 10px;
    }
    /deep/ .el-input__inner{
        background-color: rgba(150, 169, 97,0.2);
      }
    /deep/ .el-input__inner::placeholder {
      color: #96A961;
    }
    /deep/ .el-select {
      width: 200px;
    }
    .filtrate {
      display: inline;
      margin-right:10px;
    }
  }

  .week {
    width: 400px;
    height: 64px;
    margin: 0 0 0 5px;
    display: inline-block;
  }

  .el-icon-arrow-left {
    line-height: 64px;
    font-size: 45px;
    float: left;
    color: #797979;
    cursor:pointer;
  }

  .el-icon-arrow-right {
    line-height: 64px;
    font-size: 45px;
    float: right;
    color: #797979;
    cursor:pointer;
  }

  .date {
    height: 35px;
    width: 350px;
    margin: 0 auto;
    margin-top: 14px;
    font-size: 25px;
    line-height: 35px;
    text-align: center;
    color: #473C33;
  }

  .conection{
    width: 13px;
    height: 35px;
    margin: 0 5px;
    display: inline-block;
  }

  .date1 {
    height: 35px;
    width: 135px;
    background-color: rgba(150, 169, 97,0.5);
    border-radius: 5px;
    display: inline-block;
  }

  .date2 {
    height: 35px;
    width: 135px;
    background-color: rgba(150, 169, 97,0.5);
    border-radius: 5px;
    display: inline-block;
  }

  .roster-group {
    margin-left: 15px;
    position: absolute;
    top: 100px;
    bottom: 30px;
  }
  .roster{
    width: 173px;
    display: inline-block;
    vertical-align:top;
    border-radius: 0px;
    background-color: #EEEEEE;
    border: 2px solid rgba(150, 169, 97,0.5);
    margin-bottom: 20px;
    // position: relative;
    height: 100%;
    /deep/ .el-card__header{
      border-bottom: 2px solid rgba(150, 169, 97,0.5);
      text-align: center;
      height: 7%;
    }
    /deep/ .el-card__body{
      padding: 0px;
      height: 93%;
    }
    /deep/ .el-scrollbar__wrap{
      overflow-x: hidden;
    }
    .type {
      top: -25px;
      width: 100px;
      margin: 0 auto;
      margin-bottom: 20px;
      border: 2px solid rgba(246,119,28,0.9);
      border-radius: 5px;
      color: rgba(246,119,28,0.9);
      height: 18px;
      text-align: center;
      position: relative;
      bottom: 0px;
    }
  }
  // .roster:hover {
  //   background-color: rgba(121, 121, 121,0.1)!important;
  // }

  .scheduled {
    height: 105px;
    width: 165px;
    margin: 5px auto;
    .initials {
      width: 40px;
      height: 105px;
      // line-height: 105px;
      text-align: center;
      // display: inline-block;
      float: left;
      background: rgba(150, 169, 97, 0.5);
      span {
        position: relative;
        top:40px;
      }
      .edit {
        position: relative;
        top:60px;
      }
      .el-icon-setting {
        font-size: 20px;
        cursor: pointer;
      }
    }
    .staff-detail {
      width: 125px;
      height: 105px;
      // line-height: 20px;
      float: right;
      // display: inline-block;
      // padding: 4px 0;
      background: rgba(150, 169, 97, 0.1);
      .name {
        font-size: 13px;
        font-weight: 600;
        margin: 10px;
      }
      .role {
        color: #797979;
        font-size: 10px;
        margin: 10px;
      }
      .time {
        font-size: 10px;
        margin: 5px 10px;
        .t {
          display: inline-block;
          text-align: center;
          height: 20px;
          line-height: 20px;
          width: 30px;
          border-radius: 5px;
          background-color: #F2F2F2;
        }
        .c {
          display: inline-block;
          text-align: center;
          height: 20px;
          line-height: 20px;
          margin: 0 7px;
        }
      }
      .manager {
        color: #797979;
        font-size: 12px;
        margin: 4px 10px;
      }
    }
  }
  .add-shift{
    width: 165px;
    height: 95px;
    line-height: 95px;
    margin: 5px auto;
    background-color: #79797919;
    font-size: 18px;
    cursor: pointer;
    margin-bottom: 20px;
    // text-align: center;
    .el-icon-add-file {
      position: relative;
      left: 10px;
      top: -3px;
      font-size: 40px;
      color: rgba(246,119,28,0.9);
      vertical-align: middle;
      margin-right: 10px;
    }
  }
</style>
